<div>

    <h3>权限管理</h3>

    <!-- insert input starts -->
    <div class="row">
        <div class="col-md-7">
            <button ng-click="insertData()" class="btn btn-primary">添加权限</button>
            <hr />
        </div>
    </div>
    <!-- insert input ends -->

    <!-- main data part starts -->
    <div class="row" ng-show="paginationTotalItems > 0">

        <div class="col-md-7">
            <!-- data display starts -->
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="pk in dataOnPage">
                        <th>
                            {{ dataRows[pk].childPrefix }}{{ dataRows[pk].name }}
                        </th>
                        <td>
                            <button ng-click="viewData(pk)" class="btn btn-primary btn-info">查看</button>
                            <button ng-click="changePrivilege(pk)" class="btn btn-primary btn-warning">父节点</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- data display ends -->
            <!-- pagination starts -->
            <div class="col-md-12">
                <div class="row">
                    <pagination
                            boundary-links="true"
                            total-items="paginationTotalItems"
                            items-per-page="itemsPerPage"
                            page="paginationCurrentPage"
                            class="pagination-sm"
                            num-pages="paginationNumPages"
                            on-select-page="loadPageData(page)"
                            previous-text="&lsaquo;"
                            next-text="&rsaquo;"
                            first-text="&laquo;"
                            last-text="&raquo;">
                    </pagination>
                </div>
            </div>
            <!-- pagination starts -->
        </div>

        <!-- single line data display starts -->
        <div class="col-md-5" ng-show="dataView">
            <div class="affix" style="min-width:20%; top:100px;">
                <table class="table table-striped">
                    <colgroup>
                        <col width="30%">
                        <col width="70%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>字段</th>
                        <th>数值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="(column, value) in dataView" ng-show="column != 'pk'">
                        <td>{{ column }}</td>
                        <td>{{ value }}</td>
                    </tr>
                    </tbody>
                </table>
                <button ng-click="editData(dataView.pk)" class="btn btn-primary btn-warning">编辑</button>
                <button ng-click="deleteData(dataView.pk)" class="btn btn-primary btn-danger">删除</button>
            </div>
        </div>
        <!-- single line data display ends -->

    </div>
    <!-- main data part ends -->

    <!-- modal dialogue starts -->
    <script type="text/ng-template" id="dataModal.html">
        <div class="modal-header">
            <h3>{{ action }} Data<span ng-show="pk"> - ID: {{ pk }}</span></h3>
        </div>
        <div class="modal-body" ng-show="action != 'Delete'">
            <input type="hidden" ng-model="pk" value="{{ pk }}">
            <div class="row" ng-repeat="(column, value) in data">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon">{{ column }}</span>
                        <input type="{{ type[column] }}" ng-model="data[column]" class="form-control" value="{{ value }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="confirm(pk, data)">提交</button>
            <button class="btn btn-warning" ng-click="cancel()">关闭</button>
        </div>
    </script>
    <!-- modal dialogue ends -->

    <!-- modal dialogue starts -->
    <script type="text/ng-template" id="changePrivilege.html">
        <div class="modal-header">
            <h3>选择父节点</h3>
        </div>
        <div class="modal-body">
            <table class="table table-striped">
                <colgroup>
                    <col width="10%">
                    <col width="90%">
                </colgroup>
                <thead>
                <tr>
                    <th>选择</th>
                    <th>权限</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="pk in dataOnPage">
                    <th>
                        <input type="checkbox"
                               ng-show="pkId != privilegeData[pk].privilegeId && privilegeData[pk].display"
                               ng-click="choose(pk, $event)"
                               ng-checked="privilegeData[pk].checked"
                               class="privilegeId_{{ privilegeData[pk].privilegeId }}"
                               value="{{ privilegeData[pk].privilegeId }}"
                        />
                    </th>
                    <th>
                        {{ privilegeData[pk].childPrefix }}{{ privilegeData[pk].name }}
                    </th>
                </tr>
                <!--<tr ng-repeat="data in privilegeData | orderBy:'-privilegeId'">-->
                    <!--<th>-->
                        <!--<input type="checkbox"-->
                               <!--ng-show="pkId != data.privilegeId && data.display"-->
                               <!--ng-click="choose(pk, $event)"-->
                               <!--ng-checked="data.checked"-->
                               <!--class="privilegeId_{{ data.privilegeId }}"-->
                               <!--value="{{ data.privilegeId }}"-->
                        <!--/>-->
                    <!--</th>-->
                    <!--<th>-->
                        <!--{{ data.childPrefix }}{{ data.name }}-->
                    <!--</th>-->
                <!--</tr>-->
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="confirm()">提交</button>
            <button class="btn btn-warning" ng-click="cancel()">关闭</button>
        </div>
    </script>
    <!-- modal dialogue ends -->

</div>